<!-- src/views/user/SetView.vue -->
<template>
    <header class="header">

        <van-nav-bar left-arrow @click-left="$router.back()">
            <template #title>
                <span class="title">设置</span>
            </template>
        </van-nav-bar>
    </header>
    <div class="content">
        <van-cell title="绑定用户名" is-link @click="showPopup" />
        <van-popup v-model:show="show" :style="{ padding: '64px' }">
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="username" name="username" label="用户名" placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        更改
                    </van-button>
                </div>
            </van-form>

        </van-popup>
        <van-cell title="修改密码" is-link />


        <van-button class="btn" block round color="linear-gradient(to right, #ff6034, #ee0a24)" @click="isLogout">
            退出登录
        </van-button>
    </div>
</template>

<script lang="js">
import auth from '@/utils/auth'

export default {
  data() {
    return {
      show: false,
      username: ''
    }
  },
  methods: {
    isLogout() {
      auth.logout()    // 清 token、清用户信息
      this.$router.replace('/login')
    },
    showPopup() {
      this.show = true
    },
    onSubmit(values) {
      console.log('submit', values)
      this.show = false
      showNotify({ type: 'success', message: '修改成功' })
      //保存到本地
      localStorage.setItem('username', values.username)
    }
  }
}
</script>

<style lang="less" scoped>
.header {
    // box-sizing: border-box;
    border-bottom: 3px solid #666;

    .van-nav-bar {

        // background-color: #f66;
        .title {
            color: #333;
        }
    }
}

.btn {
    margin-top: 50px;
}
</style>